<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="tree-cascader-box" @click="handleClick">
        <slot></slot>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { dialogForm } from "./form";

@Component({
    model: {
        prop: "value",
        event: "change"
    }
})
export default class TreeCascader extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly value!: any[];

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly disabledValue!: any[];

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly options!: any[];

    @Prop({
        type: Boolean,
        default: false
    })
    readonly filterable!: boolean;

    @Prop({
        type: Boolean,
        default: true
    })
    readonly autoClose!: boolean;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly disabled!: boolean;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly checkStrictly!: boolean;

    @Prop({
        type: String,
        default: "树形选择器"
    })
    readonly title!: string;


    get select() {
        // console.log('getValue', this.value);
        return this.value;
    }

    set select(val: any) {
        // console.log("change", val);
        this.$emit("change", val);
    }

    handleClick() {
        if (this.disabled) return;
        const params = {
            title: this.title,
            value: this.select,
            disabledValue: this.disabledValue,
            checkStrictly: this.checkStrictly,
            filterable: this.filterable,
            options: this.options,
            sure: (vm: any, model: any) => {
                this.select = model.value;
                this.autoClose && vm.close();
                this.$emit("sure", vm, model.value);
            }
        };

        dialogForm(params);
    }
}
</script>
